<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>房源管理</el-breadcrumb-item>
        <el-breadcrumb-item>新增房源</el-breadcrumb-item>
      </el-breadcrumb>

    <el-card>
        <span style="color:red">房源信息：</span>
        <el-form ref="form" :model="form" label-width="100px" :rules="formRules">
        <el-form-item label="楼盘名称" prop="name">
            <el-input v-model="form.estaeData.name" style="width:400px" size="small" placeholder="请点击查询选择" disabled></el-input>
            <el-button size="small" type="primary" @click="showTable = true" icon="el-icon-search" style="margin-left:10px">查询</el-button>
        </el-form-item>
        <el-form-item label="楼盘地址" >
            <el-input v-model="form.estaeData.address" style="width:400px" size="small" placeholder="自动带出" disabled></el-input>
        </el-form-item>
        <el-form-item label="建筑年代" >
            <el-input v-model="form.estaeData.year" style="width:150px" size="small" placeholder="自动带出" disabled></el-input>
            <span style="margin-left:10px;">年</span>
        </el-form-item>
        <el-form-item label="物业费" >
            <el-input v-model="form.estaeData.propertyCost" style="width:150px" size="small" placeholder="自动带出" disabled></el-input>
            <span style="margin-left:10px;color:red">元/月</span>
        </el-form-item>
        <el-row>
            <el-col :span="8">
                <el-form-item label="楼栋号" prop="buildingNum">
                    <el-input v-model="form.buildingNum" style="width:150px" size="small" placeholder="输入栋号"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="单元号" prop="buildingUnit">
                    <el-input v-model="form.buildingUnit" style="width:150px;margin-left:10px" size="small" placeholder="输入单元号"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="门牌号" prop="buidingFloorNum">
                    <el-input v-model="form.buidingFloorNum" style="width:150px;margin-left:10px" size="small" placeholder="输入门牌号"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="房源标题" prop="title">
            <el-input v-model="form.title" style="width:400px" size="small" placeholder="请输入标题" ></el-input>
        </el-form-item>
        <el-form-item label="房源编号">
            <el-input v-model="form.code" style="width:400px" size="small" placeholder="自动生成" disabled></el-input>
        </el-form-item>
        <el-form-item label="租金" prop="rent">
            <el-input v-model="form.rent" style="width:200px" size="small" placeholder="输入租金"></el-input>
            <span style="margin-left:10px;color:red">元/月</span>
        </el-form-item>
        <el-form-item label="支付方式" prop="paymentMethod">
            <el-select v-model="form.paymentMethod" placeholder="请选择支付方式" size="small">
            <el-option
                        v-for="item in paymentMethodList"
                        :key="item.id"
                        :label="item.keyDesc"
                        :value="item.value">
            </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="租赁方式" prop="rentMethod">
            <el-select v-model="form.rentMethod" placeholder="请选择租赁方式" size="small">
            <el-option
                        v-for="item in rentMethodList"
                        :key="item.id"
                        :label="item.keyDesc"
                        :value="item.value">
            </el-option>
            </el-select>
        </el-form-item>
        <el-row>
            <el-col :span="4">
                <el-form-item label="户型：室" prop="room">
                    <el-input v-model="form.room" style="width:75px" size="small"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="厅" prop="hall">
                    <el-input v-model="form.hall" style="width:75px;" size="small" ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="卫" prop="guard">
                    <el-input v-model="form.guard" style="width:75px;" size="small"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <el-form-item label="建筑面积" prop="coveredArea">
                    <el-input v-model="form.coveredArea" style="width:100px" size="small"></el-input>
                    <span style="margin-left:10px;">㎡</span>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="使用面积" prop="useArea">
                    <el-input v-model="form.useArea" style="width:100px" size="small"></el-input>
                    <span style="margin-left:10px;">㎡</span>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="3">
                <el-form-item label="楼层" prop="beforeText">
                    <el-input v-model="form.beforeText" style="width:75px" size="small"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="1">
                <el-form-item>
                    <span >/</span>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item prop="afterText">
                    <el-input v-model="form.afterText" style="width:75px" size="small"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <el-form-item label="朝向" prop="orientation">
                    <el-select v-model="form.orientation" placeholder="请选择房屋朝向" size="small">
                    <el-option
                                v-for="item in orientationList"
                                :key="item.id"
                                :label="item.keyDesc"
                                :value="item.value">
                    </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="装修" prop="decoration">
                    <el-select v-model="form.decoration" placeholder="请选择装修类型" size="small">
                    <el-option
                                v-for="item in decorationList"
                                :key="item.id"
                                :label="item.keyDesc"
                                :value="item.value">
                    </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="配套设施">
            <el-checkbox-group v-model="form.facilitiesArray" >
            <el-checkbox
                   v-for="item in facilitiesList"
                   :key="item.id"
                   :label="item.keyDesc"
                   >
            </el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <span style="color:red">图片信息：</span>
        <el-form-item label="房源描述" >
            <el-input v-model="form.houseDesc" style="width:500px" size="small" type="textarea" :rows="5"></el-input>
        </el-form-item>
        <el-form-item label="上传室内图片">
            <el-upload
                action="http://121.199.58.229:8180/oss/file/test"
                list-type="picture-card"
                :file-list="fileList"
                :on-change="beforeUpload"
                :auto-upload="false"
                >
                <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                    ref="det"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </el-form-item>
        <span style="color:red">出租信息：</span>
        <el-row>
            <el-col :span="8">
                <el-form-item label="业主名称" prop="constact">
                    <el-input v-model="form.constact" style="width:200px" size="small" placeholder="名称"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="form.phone" style="width:200px;" size="small" placeholder="联系电话"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="看房时间" prop="time">
            <el-select v-model="form.time" placeholder="请选择看房时间" size="small">
                <el-option
                        v-for="item in timeList"
                        :key="item.id"
                        :label="item.keyDesc"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        
        <el-form-item>
            <el-button type="primary" @click="onSubmit" >提交</el-button>
            <el-button >取消</el-button>
        </el-form-item>
        </el-form>

        <el-drawer
            title="请选择楼盘(提示：选中某行后，请点击确定按钮)"
            :visible.sync="showTable"
            direction="rtl"
            size="50%">
            <el-input v-model="queryEstateParams.name" style="width:400px;margin-left:10px;margin-top:15px" size="small" placeholder="请输入楼盘名称模糊查询"></el-input>
            <el-button size="small" type="success" @click="queryEstate()" icon="el-icon-search" style="margin-left:10px">查询</el-button>
            <el-button size="small" type="primary" @click="selectEstate()" icon="el-icon-check" style="margin-left:10px">选择</el-button>
            <el-table :data="estaeList" 
                style="margin-left:10px"
                 highlight-current-row 
                 @current-change="handleCurrentChange" >
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column label="楼盘名称">
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="地址" width="150">
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.province }}-{{scope.row.city}}-{{scope.row.area}}</span>
                </template>
            </el-table-column>
            <el-table-column label="建筑年代" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.year }}年</span>
                </template>
            </el-table-column>
            <el-table-column label="建筑类型" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.type}}</span>
                </template>
            </el-table-column>
            <el-table-column label="物业费" >
                <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.propertyCost}}元/月</span>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryEstate.currPage"
          :page-sizes="[10,20, 30, 40, 50]"
          :page-size="queryEstate.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
        </el-drawer>

    </el-card>




    </div>
    
</template>

<script>
export default {
    name: 'AddHouse',
    data() {
        return {
            queryEstateParams: {
                name: '',
                currPage: 1,
                pageSize: 10

            },
            form: {
                estaeData: {
                    id: '',
                    name: '',
                    province: '',
                    city: '',
                    area: '',
                    address: '',
                    year: '',
                    type: '',
                    propertyCost: '',
                    propertyCompany: '',
                    developers: '',

               },
               title: '',
               buildingNum: '',
               buildingUnit: '',
               buidingFloorNum: '',
               code: '',
               rent: '',
               rentMethod: '',
               paymentMethod: '',

               houseType: '',
               room: '',
               hall: '',
               guard: '',


               coveredArea: '',
               useArea: '',

               floor: '',
               beforeText: '',
               afterText: '',

               orientation: '',
               decoration: '',

               facilitiesArray: [],

               houseDesc: '',
               constact: '',
               phone: '',
               time: '',
            },
            dialogImageUrl: '',
            dialogVisible: false,
            timeList: [],
            orientationList: [],
            paymentMethodList: [],
            rentMethodList: [],
            decorationList: [],
            facilitiesList: [],
            disabled: false,
            fileList: [],
            showTable: false,
            estaeList: [],
            estaeName: '',
            checked: false,
            total: 0,
            currentRow: null,
            formRules: {
                name: [
                    { required: false, message: '请选择楼盘', trigger: 'change' },
                ],
                title: [
                    { required: true, message: '请输入房源标题', trigger: 'blur' }
                ],
                rent: [
                    { required: true, message: '请输入租金', trigger: 'blur' }
                ],
                paymentMethod: [
                    {  required: true, message: '请选择支付方式', trigger: 'change' }
                ],
                rentMethod: [
                    {  required: true, message: '请选择租赁方式', trigger: 'change' }
                ],
                coveredArea: [
                    { required: true, message: '请输入建筑面积', trigger: 'blur' }
                ],
                useArea: [
                    { required: true, message: '请输入使用面积', trigger: 'blur' }
                ],
                orientation: [
                    { required: true, message: '请选择房屋朝向', trigger: 'change' }
                ],
                time: [
                    { required: true, message: '请选择看房时间', trigger: 'change' }
                ],
                decoration: [
                    { required: true, message: '请选择装修类型', trigger: 'change' }
                ],
                buildingNum : [
                    { required: true, message: '请输入栋号', trigger: 'blur' }

                ],
                buildingUnit: [
                    { required: true, message: '请输入单元号', trigger: 'blur' }
                ],
                buidingFloorNum: [
                    { required: true, message: '请输入门牌号', trigger: 'blur' }
                ],
                room: [
                    { required: true, message: '室不能为空', trigger: 'blur' }
                ],
                hall: [
                    { required: true, message: '厅不能为空', trigger: 'blur' }
                ],
                guard: [
                    { required: true, message: '卫不能为空', trigger: 'blur' }
                ],
                beforeText: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                afterText: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                constact: [
                    { required: true, message: '联系人不能为空', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '电话不能为空', trigger: 'blur' }
                ]

            }
        }
    },
    created() {
        this.getTimeList();
        this.getOrientationList();
        this.getPaymentMethodList();
        this.getRentMethodList();
        this.getDecorationList();
        this.getFacilitiesList();
    },
    methods: {
       onSubmit() {
           this.$refs.form.validate(async valid => {
               if(valid) {
                   var user = JSON.parse(window.sessionStorage.getItem('user'));
                   //组装请求数据
                    var fd = new FormData();
                    fd.append("userId", user.id);
                    fd.append("title", this.form.title);
                    fd.append("estateId", this.form.estaeData.id);
                    fd.append("code", "");
                    fd.append("buildingNum", this.form.buildingNum + '栋');
                    fd.append("buildingUnit", this.form.buildingUnit + "号");
                    fd.append("buidingFloorNum", this.form.buidingFloorNum + "号");
                    fd.append("rent", this.form.rent);
                    fd.append("rentMethod", this.form.rentMethod);
                    fd.append("paymentMethod", this.form.paymentMethod);
                    fd.append("houseType", this.form.room + '室' + this.form.hall + '厅' + this
                    .form.guard + '卫');
                    fd.append("coveredArea", this.form.coveredArea + '㎡');
                    fd.append("useArea", this.form.useArea + '㎡');
                    fd.append("floor", this.form.beforeText + '/' + this.form.afterText);
                    fd.append("orientation", this.form.orientation);
                    fd.append("decoration", this.form.decoration);
                    fd.append("facilitiesArray", this.form.facilitiesArray);
                    fd.append("houseDesc", this.form.houseDesc);
                    fd.append("constact", this.form.constact);
                    fd.append("phone", this.form.phone);
                    fd.append("time", this.form.time);

                    //图片参数
                    if(this.fileList !== null && this.fileList.length > 0) {
                        for (let i = 0; i < this.fileList.length; i++) {
                        fd.append("files", this.fileList[i].raw);
                        }
                    } else {
                        fd.append("files", null);
                    }
                    console.log(JSON.stringify(fd))
                   const {data: res} = await this.$http.post('/house/resources/add', fd);
                    if (res.success){
                        this.$message.success("新增成功");
                        return true;
                    }else {
                        return this.$message.error(res.message);
                    }
                    }else {
                        return this.$message.error("请填写表单");
                    }
           })
       },
       async queryEstate() {
           const{data: res} = await this.$http.post('/house/estate/list-page', JSON.stringify(this.queryEstateParams), {
                 headers: {
                            'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            if(!res.success) {
                return this.$message.error(res.message);
            }
            console.log(res)
            this.estaeList = res.data;
            this.total = res.total;

       },
       //保存要上传的图片
       beforeUpload(file, fileList) {
           console.log(file);
            this.fileList.push(file);

        },
        //移除图片
       handleRemove(file) {
        console.log(file.url)
        this.fileList = this.fileList.filter((item) => item !== file);
      },
      handlePictureCardPreview(file) {
        console.log(file.url)
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },

       //看房时间
       async getTimeList() {
            var params = new Object();
            params.pageSize = 100;
            params.currPage = 1;
            params.type = '看房时间';
            const{data: res} = await this.$http.post('/base-data/list-page', JSON.stringify(params), {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            if(!res.success) {
                return this.$message.error(res.message);
            }
            console.log(res)
            this.timeList = res.data

        },

        //朝向
       async getOrientationList() {
            var params = new Object();
            params.pageSize = 100;
            params.currPage = 1;
            params.type = '房屋朝向';
            const{data: res} = await this.$http.post('/base-data/list-page', JSON.stringify(params), {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            if(!res.success) {
                return this.$message.error(res.message);
            }
            console.log(res)
            this.orientationList = res.data

        },
    
         //支付方式
       async getPaymentMethodList() {
            var params = new Object();
            params.pageSize = 100;
            params.currPage = 1;
            params.type = '支付方式';
            const{data: res} = await this.$http.post('/base-data/list-page', JSON.stringify(params), {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            if(!res.success) {
                return this.$message.error(res.message);
            }
            console.log(res)
            this.paymentMethodList = res.data

        },

        //租赁方式
        async getRentMethodList() {
            var params = new Object();
            params.pageSize = 100;
            params.currPage = 1;
            params.type = '租赁方式';
            const{data: res} = await this.$http.post('/base-data/list-page', JSON.stringify(params), {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            if(!res.success) {
                return this.$message.error(res.message);
            }
            console.log(res)
            this.rentMethodList = res.data

        },

        //装修方式
        async getDecorationList() {
            var params = new Object();
            params.pageSize = 100;
            params.currPage = 1;
            params.type = '装修类型';
            const{data: res} = await this.$http.post('/base-data/list-page', JSON.stringify(params), {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            if(!res.success) {
                return this.$message.error(res.message);
            }
            console.log(res)
            this.decorationList = res.data

        },

        //配置设施
        async getFacilitiesList() {
            var params = new Object();
            params.pageSize = 100;
            params.currPage = 1;
            params.type = '配套设施';
            const{data: res} = await this.$http.post('/base-data/list-page', JSON.stringify(params), {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            if(!res.success) {
                return this.$message.error(res.message);
            }
            console.log(res)
            this.facilitiesList = res.data

        },


        handleSizeChange(newPageSize) {
            this.queryEstateParams.pageSize = newPageSize;
            this.queryEstate();
        },
        handleCurrentChange(newPage) {
            this.queryEstateParams.currPage = newPage;
            this.queryEstate();

        },
        handleCurrentChange(val) {
            console.log(val)
           this.currentRow = val;
        },
        selectEstate() {
            if(this.currentRow === null) {
                return this.$message.error("您并未选择！")
            }
            this.form.estaeData.id = this.currentRow.id;
            this.form.estaeData.name = this.currentRow.name;
            this.form.estaeData.province = this.currentRow.province;
            this.form.estaeData.city = this.currentRow.city;
            this.form.estaeData.area = this.currentRow.area;
            this.form.estaeData.developers = this.currentRow.developers;
            this.form.estaeData.propertyCost = this.currentRow.propertyCost;
            this.form.estaeData.propertyCompany = this.currentRow.propertyCompany;
            this.form.estaeData.year = this.currentRow.year;
            this.form.estaeData.address = this.currentRow.address;
            console.log(this.form.estaeData.id)
            this.showTable = false;
            this.currentRow = null;
            this.queryEstateParams.name = '';
            this.queryEstateParams.currPage = 1;
            this.queryEstateParams.pageSize = 10;

        },

        
        
        
    },
    


    
}
</script>

<style scoped>

</style>